<template>
	<el-dialog width="70%" :close-on-click-modal="false" v-model="dialogVisible" title="添加产品" destroy-on-close :before-close="handleClose">
		<ComboSearch
			style="width: 400px"
			:options="state.comboSearchOpt"
			:prefixSelect="'1'"
			@search="handleComboSearch($event, 'searchDto')"
			ref="comboSearchRef"
		/>
		<TableLayout
			ref="tableLayoutRef"
			max-height="calc(54vh)"
			:rowKey="'skuId'"
			:fetchList="stockSkuList"
			:queryForm="state.queryForm"
			:header-cell-style="{ color: '#000', background: '#F5F7FA' }"
			@selectionChange="selectionChange"
		>
			<template v-slot:tableLayout>
				<el-table-column reserve-selection="true" align="center" type="selection" width="40" />
				<el-table-column label="图片" prop="picUrl" width="80px">
					<template #default="scope">
						<div v-if="scope.row.skuName" class="list-image">
							<ewt-image :url="scope.row.picUrl" style="width: 36px; height: 36px; object-fit: contain; display: block; cursor: pointer" />
							<div class="tag-combination" v-if="scope.row.skuType === '2'">组</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="产品名称 / SPU / SKU" prop="skuName" width="180">
					<template v-slot="{ row }">
						{{ row.skuName || '--' }} <br />
						{{ row.spu || '--' }}<br />

						<el-link v-if="row.sku" type="primary" @click="skuDetailDialogRef.openDialog(row.skuId, false, false)">{{ row.sku }}</el-link>
						<span v-else>--</span>
					</template>
				</el-table-column>
				<el-table-column label="备货平台" prop="stockPlatformName" width="120px"></el-table-column>
				<el-table-column label="MSKU / FNSKU" prop="MSKU">
					<template v-slot="{ row }">
						{{ row.msku || '--' }} <br />
						{{ row.fnsku || '--' }}
					</template>
				</el-table-column>
				<el-table-column v-if="props.type !== 'inboundDelivery'" label="良品可用量" prop="goodAvailableQty"></el-table-column>
				<el-table-column v-if="props.type !== 'inboundDelivery'" label="次品可用量" prop="defectiveAvailableQty"></el-table-column>
			</template>
		</TableLayout>
		<template #footer>
			<div>
				<el-button @click="handleClose">取消</el-button>
				<el-button @click="innerSubmit" class="ml10" type="primary">确定</el-button>
			</div>
		</template>
		<SkuDetailDialog ref="skuDetailDialogRef" />
	</el-dialog>
</template>
<script lang="ts" setup name="addProductDialog">
import { stockSkuList } from '../api.ts';
const props = defineProps({
	showProdList: {
		type: Array,
		default: () => {
			return [];
		},
	},
	form: {
		type: Object,
		default: () => {
			return {};
		},
	},
	type: {
		type: String,
		default: '',
	},
});
const state = reactive({
	prodList: [],
	queryForm: {
		searchDto: {},
		companyId: '',
		teamId: '',
		whIdFrom: '',
		whIdTo: '',
		stockingAreaCode: '',
	},
	comboSearchOpt: [
		{ label: 'SPU', key: '1' },
		{ label: 'SKU', key: '2' },
		{ label: 'MSKU', key: '3' },
		// { label: 'FNSKU', key: 'fnsku' },
	],
});
const dialogVisible = ref(false);
const comboSearchRef = ref();
const tableLayoutRef = ref();
const skuDetailDialogRef = ref();
const emit = defineEmits(['selectData']);
const innerSubmit = () => {
	emit('selectData', state.prodList);
	handleClose();
};
// 选中的数据
const selectionChange = (rows) => {
	state.prodList = rows;
};
const setSelectRow = () => {
	let data = props.showProdList.filter((it) => it.skuId);
	// 设置列表数据选中与否;
	tableLayoutRef?.value.tableRef.clearSelection();
	data.map((it) => tableLayoutRef?.value.tableRef.toggleRowSelection(it));
};
const toRefresh = () => {
	tableLayoutRef?.value.refresh();
	setSelectRow();
};
const handleComboSearch = (ids, type) => {
	state.queryForm[type] = {};
	const { key, like, value } = ids;
	state.queryForm[type].searchFieldId = key;
	state.queryForm[type].searchValue = like;
	state.queryForm[type].searchValueList = value;
	state.queryForm[type].searchMode = value.length ? 'mode_in' : 'mode_like';
	toRefresh();
};
// 打开弹窗
const openDialog = async () => {
	dialogVisible.value = true;
	state.queryForm.companyId = props.form.companyId;
	// state.queryForm.companyId = '1';
	state.queryForm.teamId = props.form.teamId;
	// state.queryForm.teamId = '1';
	state.queryForm.whIdFrom = props.form.whIdFrom;
	state.queryForm.whIdTo = props.form.whIdTo;
	state.queryForm.stockingAreaCode = props.form.stockingAreaCode || props.form.stockupAreaCode;
	// state.queryForm.stockingAreaCode = 'US';
	nextTick(() => {
		setSelectRow();
	});
};
// 关闭弹窗
const handleClose = () => {
	dialogVisible.value = false;
};
defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped>
.non-pic {
	background: rgba(11, 16, 25, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.03);
	color: rgba(11, 16, 25, 0.12);
	border-radius: 2px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
}
</style>